<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <button id="btn">获取验证码</button>

    <script>

        // 定时器叠加问题的解决思路
        //    点击之后倒计时，在倒计时的这一段时间里面都不允许再点击


        //   思路：搞一个开关
        //        开关如果是开着的  表示可以点击
        //        开关如果是关着的   就什么都不做(也就是实现不能点击)

        var oBtn = document.getElementById('btn');

        // 开关 -- 
        var flag = true;

        // 点击的时候，变成60s倒计时
        oBtn.onclick = function () {
            if (flag) {
                // 点击了以后的10s内开关都关闭
                flag = false ;
                oBtn.innerHTML = '10s之后可以再次获取';
                // 10s倒计时
                var count = 10;
                var t = setInterval(function () {
                    count--;
                    oBtn.innerHTML = count + 's之后可以再次获取';
                    if (count <= 0) {
                        clearInterval(t);
                        oBtn.innerHTML = '获取验证码';
                        // 定时器结束以后，把开关打开
                        flag = true ;
                    }
                }, 1000)
            }
        }



    </script>

</body>

</html>